@model StandardArchive
@{
    ViewData["Title"] = !string.IsNullOrEmpty(Model.MetaTitle) ? Model.MetaTitle : Model.Title;
    var hasImage = Model.PrimaryImage.HasValue;

    var posts = Model.Archive.Posts.Count;

    Func<string> BlogLink = () => {
        return Model.Permalink
            + (Model.Archive.Category != null ? $"/category/{Model.Archive.Category.Slug}"  : "")
            + (Model.Archive.Year.HasValue ? $"/{Model.Archive.Year}" : "" )
            + (Model.Archive.Month.HasValue ? $"/{Model.Archive.Month}" : "");
    };
}
@section head {
    @WebApp.MetaTags(Model)
}

<header @(hasImage ? "class=has-image" : "") @(hasImage ? $"style=background-image:url({ @Url.Content(WebApp.Media.ResizeImage(Model.PrimaryImage, 1920, 400)) })" : "")>
    <div class="dimmer"></div>
    <div class="container text-center">
        <h1>@Model.Title</h1>
        @if (!string.IsNullOrWhiteSpace(Model.Excerpt))
        {
            <div class="row justify-content-center">
                <div class="col-lg-8 lead">
                    @Html.Raw(Model.Excerpt)
                </div>
            </div>
        }
    </div>
</header>

<main class="archive">
    @foreach (var block in Model.Blocks)
    {
        <div class="block @block.CssName()">
            <div class="container">
                @Html.DisplayFor(m => block, block.GetType().Name)
            </div>
        </div>
    }
    <div class="container">
        @for (var n = 0; n < posts; n += 2)
        {
            <div class="row">
                @for (var i = n; i < Math.Min(posts, n + 2); i++)
                {
                    var post = Model.Archive.Posts[i];

                    <div class="@(i == 0 ? "col-md-12" : "col-md-6")">
                        <article>
                            <header>
                                @if (post.PrimaryImage.HasValue)
                                {
                                    <a href="@post.Permalink">
                                        <img class="rounded mb-3" src="@Url.Content(WebApp.Media.ResizeImage(post.PrimaryImage, 1140, 450))" alt="@post.PrimaryImage.Media.AltText">
                                    </a>
                                }
                                <h3>@post.Title</h3>
                                <p class="post-meta">
                                    <span>
                                        In <a href="@Model.Permalink/category/@post.Category.Slug">@post.Category.Title</a>
                                    </span>
                                    <span>
                                        Tags
                                        @foreach (var tag in post.Tags)
                                        {
                                            <a href="@Model.Permalink/tag/@tag.Slug">#@tag.Slug</a>
                                        }
                                    </span>
                                    @if (post.IsPublished)
                                    {
                                        <span>
                                            Published @post.Published.Value.ToShortDateString()
                                        </span>
                                    }
                                    @if (post.EnableComments && post.CommentCount > 0)
                                    {
                                        <span>
                                            <a href="@post.Permalink#comments">@post.CommentCount @(post.CommentCount == 1 ? "comment" : "comments")</a>
                                        </span>
                                    }
                                </p>
                                <p>@Html.Raw(post.Excerpt)</p>
                                <a href="@post.Permalink" class="btn btn-primary">Read more</a>
                            </header>
                        </article>
                    </div>
                    @if (i == 0)
                    {
                        n--;
                        break;
                    }
                }
            </div>
        }
        @if (Model.Archive.TotalPages > 1) {
            <div class="row">
                <div class="col-sm">
                    <nav aria-label="Page navigation example">
                    <ul class="pagination justify-content-center">
                        <li class="page-item">
                            <a class="page-link" href="@BlogLink()/page/1">
                                <span aria-hidden="true">&laquo;</span>
                                <span class="sr-only">Previous</span>
                            </a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="@BlogLink()/page/@Math.Max(1, Model.Archive.CurrentPage - 1)">
                                <span aria-hidden="true">&lsaquo;</span>
                                <span class="sr-only">Previous</span>
                            </a>
                        </li>
                        @for (var n = 1; n <= Model.Archive.TotalPages; n++) {
                            <li class="page-item @(Model.Archive.CurrentPage == n ? "active" : "")"><a class="page-link" href="@BlogLink()/page/@n">@n</a></li>
                        }
                        <li class="page-item">
                            <a class="page-link" href="@BlogLink()/page/@Math.Min(Model.Archive.TotalPages, Model.Archive.CurrentPage + 1)">
                                <span aria-hidden="true">&rsaquo;</span>
                                <span class="sr-only">Next</span>
                            </a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="@BlogLink()/page/@Model.Archive.TotalPages">
                                <span aria-hidden="true">&raquo;</span>
                                <span class="sr-only">Next</span>
                            </a>
                        </li>
                    </ul>
                    </nav>
                </div>
            </div>
        }
    </div>
</main>
